<template>
    <div id="signTask">
        <div class="navbar" v-if="showBar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            每日签到
        </div>
        <div class="banner">
            <div class="title" v-if="!showBar">
                <div class="icon" @click="goBack">
                    <i class="iconfont">&#xe72d;</i>
                </div>
                每日签到
            </div>
        </div>
        <div class="content">
            <div class="title">{{signList.date}}</div>
            <div class="week">
                <span>日</span>
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span>六</span>
            </div>
            <div class="box">
                <div class="day" v-for="item in getweek" :key="item+32"  v-if="getweek"></div>
                <div class="day" v-for="(item,index) in signList.data" :key="index" :class="item.is_finish==1?'is_Sign':''">
                    {{item.day}}
                </div>
            </div>
            <div class="sign-btn" @click="sign" v-if="issign==false">马上签到</div>
            <div class="sign-btn isSign" v-else>已签到</div>
        </div>
        <div class="gift-box">
            <div class="title">
                <span>连续签到礼包</span>
            </div>
            <div class="lists">
                <div class="list" v-for="(item,index) in signList.successive" :key="index">
                    <div class="info">
                        <div class="name">{{item.name}}({{item.game_coin}}游币)</div>
                        <div class="desc">{{item.content}}</div>
                    </div>
                    <div class="btns">
                        <div class="btn btn-ing" v-if="item.is_finish==0">进行中</div>
                        <div class="btn btn-active" v-else-if="item.is_finish==1" @click="receive(item.id)">领取</div>
                        <div class="btn btn-disabled" v-else>已领取</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {signList,sign,taskReceive} from 'api/game_box'
    import {formatDate} from 'js/date'
    export default {
        data(){
            return{
                signList:[],
                firstDay:'',
                showBar:false
            }
        },
        created(){
            this.init();
        },
        computed:{
            issign(){
               let checked=[];
               let today=formatDate(new Date(), 'yyyy-MM-dd');
               if(this.signList.data){
                    this.signList.data.forEach((item)=>{
                        item.is_finish==1?checked.push(item):'';
                    })
                    let is_Sign=checked.some((item)=>{
                        return item.date==today;
                    }) 
                    return is_Sign;
               } 
            },
            getweek(){
                if(this.firstDay){
                     let day = new Date(this.firstDay).getDay();
                      return day
                }
            }
        },
        methods:{
            init(){
                signList().then(res=>{
                    if(res.data.error==0){
                        this.signList=res.data.content;
                        this.firstDay=res.data.content.data.slice(0,1)[0].date;
                    }
                })
            },
            goBack(){
               if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            },
            sign(){
                sign().then(res=>{
                    if(res.data.error==0){
                        this.init();
                    }
                })
            },
            receive(id){
                taskReceive(id).then(res=>{
                    if(res.data.error==0){
                        this.init();
                    }
                })
            },
            handleScroll(){
              let top= document.documentElement.scrollTop||document.body.scrollTop;
              if(top>50){
                this.showBar=true;
              }else{
                 this.showBar=false;
              }
            }
        },
        mounted () {
           window.addEventListener('scroll', this.handleScroll);
        },
        destroyed (){
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable';
@import '~styles/mixins';
#signTask{
    background:pink;
    min-height:100vh;
    .navbar{
        position: fixed;
        top:0;
        z-index:999;
        width:7.5rem;
        left:50%;
        transform: translateX(-50%);
        height:0.8rem;
        line-height:0.8rem;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        color:#F2F2F2;
        background:#FF4F33;
        .icon{
            position:absolute;
            top:0;
            left:0;
            .iconfont{
                padding:0 0.2rem;
                font-size:0.4rem;
                color:#fff;
            }
        }
    }
    .banner{
      width:100%;
      height:5.06rem;
      @include bg-image('../../assets/image/sign-bg');
      background-size:100% 100%;
      background-repeat:no-repeat;
      .title{
        position: fixed;
        top:0;
        z-index:999;
        width:7.5rem;
        left:50%;
        transform: translateX(-50%);
        height:0.8rem;
        line-height:0.8rem;
        color:#fff;
        text-align: center;
        font-size:$font-size-l;
        color:#F2F2F2;
        .icon{
            position:absolute;
            top:0;
            left:0;
            .iconfont{
                padding:0 0.2rem;
                font-size:0.4rem;
                color:#fff;
            }
        }
      }
    }
    .content{
        position: relative;
        top: -1.4rem;
        overflow: hidden;
        margin:0 auto;
        padding:.2rem .2rem;
        width:7.02rem;
        border-radius:.2rem;
        background:#fff;
        box-shadow:0px 2px 43px 0px rgba(255,86,60,0.15);
        .title{
            padding-bottom:.2rem;
            text-align: center;
            line-height:.5rem;
            font-size:.34rem;
            color:#111;
            border-bottom:1px solid #ccc;
        }
        .week{
            display: flex;
            span{
               margin:.2rem 0;
               flex:1;
               text-align: center;
               color:#111;
               font-size:.3rem;
            }
        }
        .box{
            display:flex;
            flex-wrap: wrap;
            .day{
                position:relative;
                margin:0 1px 10px 0;
                width:.92rem;
                height:.6rem;
                line-height:.6rem;
                text-align: center;
                background:#fff;
                border-radius:.06rem;
                font-size:.34rem;
                color:#111;
                &.is_Sign:after{
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform: translate(-50%,-50%);
                    content:'';
                    width:.48rem;
                    height:.48rem;
                    border-radius:50%;
                    @include bg-image('../../assets/image/sign-icon');
                    background-size:100% 100%;
                    background-repeat: no-repeat;
                }
            }
        }
        .sign-btn{
            float:right;
            margin:.1rem;
            width:2.4rem;
            height:.6rem;
            line-height:.6rem;
            text-align:center;
            background:#FF543A;
            color:#fff;
            border-radius: .2rem;
            &.isSign{
                background:#ccc;
            }
        }
    }
    .gift-box{
        position:relative;
        margin:0 auto;
        padding-top:.3rem;
        top:-1rem;
        width:7.02rem;
        background:#fff;
        border-radius:.2rem;
        .title{
            text-align: center;
            font-size:.34rem;
            color:#111;
            font-weight: bold;
            span{
                display:inline-block;
                position: relative;
                padding:0 .6rem;
                line-height:.8rem;
                &::before{
                    content:'';
                    width:.27rem;
                    height:.31rem;
                    position:absolute;
                    top:50%;
                    transform: translateY(-50%);
                    left:0;
                    @include bg-image('../../assets/image/sign-title-l');
                    background-size:100% 100%;
                    background-repeat:no-repeat;
                }
                &::after{
                    content:'';
                    width:.27rem;
                    height:.31rem;
                    position:absolute;
                    top:50%;
                    transform: translateY(-50%);
                    right:0;
                    @include bg-image('../../assets/image/sign-title-r');
                    background-size:100% 100%;
                    background-repeat:no-repeat;
                }
            }
        }
        .lists{
            padding:0 .3rem;
            .list{
                margin-top:.2rem;
                padding-bottom:.2rem;
                border-bottom:1px solid #ccc;
                display:flex;
                .info{
                    flex: 1;
                    .name{
                        font-size:.3rem;
                        color:#333;
                    }
                    .desc{
                        margin-top:.1rem;
                        color:#666;
                        font-size:.24rem;
                    }
                }
                .btns{
                    display:flex;
                    align-items: flex-end;
                    .btn{
                        margin-right:.3rem;
                        text-align: center;
                        width:1.3rem;
                        height:.5rem;
                        line-height:.5rem;
                        border-radius:.25rem;
                        &.btn-ing{
                            border:1px solid #FF543A;
                            color:#FF543A;
                        }
                        &.btn-active{
                            background:#FF543A;
                            color:#fff;
                        }
                        &.btn-disabled{
                            background: #ccc;
                            color:#fff;
                        }
                    }
                }
                &:last-child{
                    border:none;
                }
            }
        }
    }
}
</style>